// enabled and disabled
button {
   cursor: pointer;
   font-family: $sans;
   border-radius: 0.2em;

   margin: 0.5em;
   border: none;
   padding: 0.5em;
}
button:disabled {
   cursor: not-allowed;
   color: black;
   opacity: 0.5;
}

// three different states
button:hover   { background-image: linear-gradient( rgba(0,0,0,0.1) , rgba(0,0,0,0.1) ); }
button:active  { background-image: linear-gradient( rgba(0,0,0,0.2) , rgba(0,0,0,0.2) ); }
button:focus   { outline: none; }

// buttons with significance
button[clarus~=normal],    { background-color: $bg-gray; }
button[clarus~=primary],   { background-color: $bg-blue; }
button[clarus~=error],     { background-color: $bg-red; }
button[clarus~=warning],   { background-color: $bg-orange; }
button[clarus~=success],   { background-color: $bg-green; }
